<template>
  <div class="host">
    <div class="date-head">
      <el-radio-group v-model="searchType" size="mini" @change="changeTime">
        <el-radio-button label="1">近一日</el-radio-button>
        <el-radio-button label="2">近一周</el-radio-button>
        <el-radio-button label="3">近一月</el-radio-button>
        <el-radio-button label="custom">自定义</el-radio-button>
      </el-radio-group>
      <el-date-picker
        v-if="searchType == 'custom'"
        v-model="pickTime"
        :default-time="['00:00:00', '23:59:59']"
        type="daterange"
        size="mini"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期"
        @change="changeTime"
      />
    </div>
    <div class="overview">
      <div class="boxes">
        <div class="title">数据接入概览</div>
        <div class="content">
          <div v-for="(item, index) in 6" :key="index" style="cursor: pointer" @click="enterIndex(index)">
            <p>{{ nameArr[index] }}</p>
            <div class="c-bottom">
              <img :src="require(`@/assets/images/milkyHostpage/0${item}@2x.png`)" alt>
              <div>
                <span class="totalnum" :title="overviewObj[leftFieldArr[index]]">{{ overviewObj[leftFieldArr[index]]>9999?'9999+':overviewObj[leftFieldArr[index]] }}</span>
                {{ index==3? '条' :'个' }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="boxes">
        <div class="title">接入情况</div>
        <div class="r-bot">
          <div class="left">
            <div
              v-for="(i, idx) in 3"
              :key="i"
              style="cursor: pointer"
              class="card-container"
              :class="chooseIndex == idx ? 'active' : ''"
              @click="changeChoose(idx)"
            >
              <p>{{ situationName[idx] }}</p>
              <div>
                <span class="totalnum" @click.stop="rightJump(idx)" :title="overviewObj[situationField[idx]].countNum">
                  {{ overviewObj[situationField[idx]].countNum>999?'999+':overviewObj[situationField[idx]].countNum }} </span>条
              </div>
            </div>
          </div>
          <pie-chart ref="pie_chart" />
        </div>
      </div>
    </div>
    <div class="boxes trend">
      <div class="title">
        <span>接入趋势</span>
        <el-select v-model="productId" size="small" placeholder="请选择" clearable @change="getTrend">
          <el-option v-for="item in productIdArr" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <trend-chart v-if="!showEmpty" ref="trend_chart" />

      <el-empty v-else description="暂无数据" />
    </div>
    <div class="boxes products">
      <div class="title">
        <span>各产品接入情况</span>
        <div>
          <el-radio-group v-model="accessType" @change="getMetaDataList">
            <el-radio :label="1">接入过数据</el-radio>
            <el-radio :label="3">接入数据异常</el-radio>
          </el-radio-group>
          <el-button v-if="accessType" type="text" icon="el-icon-refresh" style="margin-left: 20px" @click="resetType">重置</el-button>
          <el-button type="text" style="margin-left: 100px" @click="getDetail">更多</el-button>
        </div>
      </div>
      <div v-loading="loading" class="content">
        <template v-if="detailArr.length>0">
          <access-details v-for="(item, index) in detailArr.slice(0, 3)" :key="index" :detail-obj="item" />
        </template>
        <el-empty v-else style="width:100%" description="暂无数据" />
      </div>
    </div>
  </div>
</template>

<script>
import AccessDetails from './components/accessDetails.vue'
import PieChart from './components/pieChart.vue'
import TrendChart from './components/trendChart.vue'
import { getMetaDataList, dataInfo, accessTrends, productList } from '@/api/milkyway/hostPage'

export default {
  components: { PieChart, TrendChart, AccessDetails },
  data() {
    return {
      loading: false,
      // 日期选择
      searchType: '1',
      // 日期选择器
      pickTime: [],
      // 自定义时间
      startTime: '',
      endTime: '',
      overviewObj: {
        productNum: 0,
        dataSourceInputNum: 0,
        dataSourceOutNum: 0,
        policyNum: 0,
        taskNum: 0,
        jobNum: 0,
        accessInfo: { countNum: 0 },
        unAnalysisInfo: { countNum: 0 },
        abnormalInfo: { countNum: 0 }
      },
      // 产品id
      productId: '',
      // 产品id列表
      productIdArr: [],
      showEmpty: true,
      // 接入概览左侧名称列表
      nameArr: ['对接产品', '接入数据源', '输出数据源', '解析规则', '接入任务', '接入作业'],
      // 左侧字段
      leftFieldArr: ['productNum', 'dataSourceInputNum', 'dataSourceOutNum', 'policyNum', 'taskNum', 'jobNum'],
      // 右侧名称
      situationName: ['接入数据', '未解析数据', '接入异常'],
      // 右侧字段
      situationField: ['accessInfo', 'unAnalysisInfo', 'abnormalInfo'],
      //   接入概览右侧选中项
      chooseIndex: 0,
      // 接入类型
      accessType: undefined,
      // 接入产品情况
      detailArr: [],
      scrollToTop: false
    }
  },
  mounted() {
    this.getData()
    this.getMetaDataList()
    this.changeChoose(0)
    this.getProductArr()
  },
  methods: {
    // 改变时间
    changeTime() {
      this.startTime = ''
      this.endTime = ''
      if (this.searchType === 'custom') {
        if (this.pickTime?.length) {
          this.startTime = this.pickTime[0]
          this.endTime = this.pickTime[1]
        } else {
          return
        }
      } else if (this.searchType !== 'custom') {
        this.pickTime = []
      }
      this.getData()
    },
    // 接入情况数据
    changeChoose(idx) {
      this.chooseIndex = idx
      this.$refs.pie_chart?.getData(this.overviewObj[this.situationField[idx]])
    },
    // 数据接入概览跳转
    enterIndex(idx) {
      let router
      switch (idx) {
        case 0:
          // 接入产品
          router = '/mlk/accessProduct'
          break
        case 1:
          // 接入数据源
          router = '/mlk/access/datasource'
          break
        case 2:
          // 输出数据源
          router = '/mlk/access/outputDatasource'
          break
        case 3:
          // 接入规则
          router = '/mlk/access/rule'
          break

        case 4:
          // 任务管理
          router = '/mlk/task/taskList'
          break
        case 5:
          // 作业管理
          router = '/mlk/task/jobScheduleList'
          break
      }

      // this.$router.push("/zjgapp" + router);
      this.$router.push({ path: window.prefix + router, query: { name: 'mlkHome' }})
    },
    // 右侧跳转
    rightJump(idx) {
      if (idx === 0) return
      else if (idx === 1) {
        this.$router.push({ path: window.prefix + '/mlk/task/unparsedLogs', query: { name: 'mlkHome' }})
      } else {
        this.$router.push({ path: window.prefix + '/mlk/task/errorAlarm', query: { name: 'mlkHome' }})
      }
    },
    // 获取数据
    getData() {
      const query = {
        searchType: this.searchType,
        startTime: this.startTime,
        endTime: this.endTime
      }
      dataInfo(query).then((res) => {
        this.overviewObj = res
        this.$refs.pie_chart?.getData(this.overviewObj[this.situationField[this.chooseIndex]])
      })
      this.getTrend()
    },
    // 各产品接入情况
    getMetaDataList() {
      this.loading = true
      this.scrollToTop = true
      this.detailArr = []
      getMetaDataList({ accessType: this.accessType }).then((res) => {
        this.detailArr = res
        this.loading = false
        this.scrollToTop = false
      })
    },
    // 获取产品列表
    getProductArr() {
      productList().then((res) => {
        this.productIdArr = res.map((item) => {
          return {
            label: item.productName,
            value: item.id
          }
        })
      })
    },
    // 获取接入趋势
    getTrend() {
      const query = {
        searchType: this.searchType,
        startTime: this.startTime,
        endTime: this.endTime,
        productId: this.productId
      }
      accessTrends(query).then((res) => {
        if (res.length) {
          this.showEmpty = false
          this.$nextTick(() => {
            this.$refs.trend_chart?.getData(this.searchType, res)
          })
        } else this.showEmpty = true
      })
    },

    // 获取详情
    getDetail() {
      const router = this.accessType ? '/mlk/accessInformation?accessType=' + this.accessType : '/mlk/accessInformation'
      this.$router.push(window.prefix + router)
    },
    // 重置状态
    resetType() {
      this.accessType = undefined
      this.getMetaDataList()
    }
  }
}
</script>

<style lang="scss" scoped>
#app.dark-theme{
  .host .overview .content > div{
    background:rgba(59,139,255,.1);
  }
}
.card-container{
  margin-right: right 0px !important;
}
.host {
  background: #f3f5fb;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 20px;

  .boxes {
    background: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 20px;
    }
  }
  .totalnum {
    font-size: 24px;
    color: #4b6eef;
    margin-right: 6px;
  }
  .date-head {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: flex-end;
    .el-date-editor{
      margin-left:20px;
    }
  }
  .overview {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 20px;

    // height: 100%;
    & > div {
      width: 50%;

      & + div {
        margin-left: 20px;
      }
      .r-bot {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-content: center;
        .left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          height: 100%;
          width: 300px;

          .card-container {
            padding: 0 20px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f3f5fb;
            border-radius: 4px;
            height: 33%;
            cursor: pointer;
            font-size: 14px;
            border: 1px solid rgba(230, 230, 230, 1);
            &:nth-of-type(2) {
              margin: 10px 0;
            }
            p {
              font-size: 16px;

              font-weight: 500;
            }
          }
          .active {
            border-color: #2979ff;
          }
        }
        .right {
          flex: 1;
          height: 100%;
        }
      }
    }
    .content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-content: center;
      & > div {
        background: #f3f5fb;
        width: 32.5%;
        padding: 20px;
        border-radius: 4px;
        &:nth-of-type(n + 4) {
          margin-top: 10px;
        }
        p {
          margin: 0;
        }
        .c-bottom {
          margin-top: 20px;
          display: flex;
          width: 100%;
          justify-content: space-between;
          align-items: flex-end;
          font-size: 14px;
          img {
            width: 48px;
          }
        }
      }
    }
  }
  .trend {
    margin: 20px 0;
    height: 300px;
    display: flex;
    flex-direction: column;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-empty {
      padding: 0;
    }
  }
  .products {
    .content {
      display: flex;
      .detail {
        width: 33%;
        margin-right: 20px;
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
}
::v-deep {
  .el-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-card__body {
      flex: 1;
      display: flex;
      flex-direction: column;
      .cbottom {
        flex: 1;
      }
    }
  }
}
</style>
